<template>
  <a-modal
    title="操作"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model class="permission-form" :form="form">

      <a-form-model-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="唯一识别码"
        hasFeedback
        validateStatus="success"
      >
        <a-input placeholder="唯一识别码" disabled="disabled" v-model="form.id"/>
      </a-form-model-item>

      <a-form-model-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="角色名称"
        hasFeedback
        validateStatus="success"
      >
        <a-input placeholder="起一个名字" v-model="form.name"/>
      </a-form-model-item>

      <a-form-model-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="状态"
        hasFeedback
        validateStatus="warning"
      >
        <a-select v-model="form.status">
          <a-select-option :value="1">正常</a-select-option>
          <a-select-option :value="2">禁用</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="描述"
        hasFeedback
      >
        <a-textarea :rows="5" placeholder="..." v-model="form.describe"/>
      </a-form-model-item>

      <a-divider>拥有权限</a-divider>
      <template v-for="permission in permissions">
        <a-form-model-item
          class="permission-group"
          v-if="permission.actionsOptions && permission.actionsOptions.length > 0"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          :key="permission.permissionId"
          :label="permission.permissionName"
        >
          <a-checkbox>全选</a-checkbox>
          <a-checkbox-group v-model="permission.permissionId" :options="permission.actionsOptions"/>
        </a-form-model-item>
      </template>

    </a-form-model>
  </a-modal>
</template>

<script>
import { getPermissions } from '@/api/manage'

export default {
  name: 'RoleModal',
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      mdl: {},

      form: {},
      permissions: []
    }
  },
  created () {
    this.loadPermissions()
  },
  methods: {
    add () {
      this.edit({ id: 0 })
    },
    edit (record) {
      this.form = Object.assign({}, record)
      this.visible = true
      // 有权限表，处理勾选
      // if (this.mdl.permissions && this.permissions) {
      //   // 先处理要勾选的权限结构
      //   const permissionsAction = {}
      //   this.mdl.permissions.forEach(permission => {
      //     permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
      //   })
      //   // 把权限表遍历一遍，设定要勾选的权限 action
      //   this.permissions.forEach(permission => {
      //     permission.selected = permissionsAction[permission.id] || []
      //   })
      // }

      // const checkboxGroup = {}
      // this.permissions = record.permissions.map(permission => {
      //   const groupKey = `permissions.${permission.permissionId}`
      //   checkboxGroup[groupKey] = permission.actionList
      //   const actionsOptions = permission.actionEntitySet.map(action => {
      //     return {
      //       label: action.describe,
      //       value: action.action,
      //       defaultCheck: action.defaultCheck
      //     }
      //   })
      //   return {
      //     ...permission,
      //     actionsOptions
      //   }
      // })


      this.form.permissions.forEach(permission => {
        permission.actionsOptions = permission.actionEntitySet.map(action => {
          return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
        })
      })
      console.log(this.form)
    },
    close () {
      this.$emit('close')
      this.visible = false
    },
    handleOk () {
      const _this = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          console.log('form values', values)

          _this.confirmLoading = true
          // 模拟后端请求 2000 毫秒延迟
          new Promise((resolve) => {
            setTimeout(() => resolve(), 2000)
          }).then(() => {
            // Do something
            _this.$message.success('保存成功')
            _this.$emit('ok')
          }).catch(() => {
            // Do something
          }).finally(() => {
            _this.confirmLoading = false
            _this.close()
          })
        }
      })
    },
    handleCancel () {
      this.close()
    },
    onChangeCheck (permission) {
      permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
      permission.checkedAll = permission.selected.length === permission.actionsOptions.length
    },
    onChangeCheckAll (e, permission) {
      Object.assign(permission, {
        selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
        indeterminate: false,
        checkedAll: e.target.checked
      })
    },
    loadPermissions () {
      const that = this
      getPermissions().then(res => {
        const result = res.result
        that.permissions = result.map(permission => {
          const options = JSON.parse(permission.actionData) || []
          permission.checkedAll = false
          permission.selected = []
          permission.indeterminate = false
          permission.actionsOptions = options.map(option => {
            return {
              label: option.describe,
              value: option.action
            }
          })
          return permission
        })
      })
    }

  }
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}

</style>
